//
//  TabListItem.swift
//  tabSwitch
//
//  Created by Apple on 2021/6/11.
//

import SwiftUI

struct TabListItem: View {
    @EnvironmentObject var modelData : TabItemsModelData
    var logo: Image
    var title: String
    var url: String
    var image: Image
    var id: UUID
    var callback: TabSwitchCallBack?
    var width: CGFloat {UIScreen.main.bounds.width*wf}
    var height: CGFloat {UIScreen.main.bounds.height*hf}
    
    @Binding var wf:CGFloat
    @Binding var hf:CGFloat
    
    @State var offset : CGSize = CGSize(width: 0, height: 0)
    var body: some View {
        Button(action:{

            //callback?.goToView(by: .IndexView, sender: self, with: ["id":id])
            callback?.goToView(to: .IndexView, from: .TabSwitchView, intent: .Default, with: [.id:id])
        }){
            VStack{
                HStack{
                    logo
                        .resizable()
                        .frame(width: width / 25, height: width / 25)
                        .padding(EdgeInsets(top: 0, leading: 3, bottom: 0, trailing: 3 ))
                    Text(title)
                        .foregroundColor(.black)
                        .lineLimit(nil)
                    Spacer()
                    Button(action:{
                        modelData.TabItemList = modelData.TabItemList.filter({$0.id != id})
                        callback?.deleteTabViewById(id: id)
                    }){
                        Image("delete")
                            .resizable()
                            .frame(width: width / 20, height: width / 20)
                            .padding(EdgeInsets(top: 0, leading: 3, bottom: 0, trailing: 3 ))
                    }
                    
                }
                .frame(height: height * 0.05, alignment: .center)
                .zIndex(2)
                image
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: width * 0.43, height: height * 0.33)
                    .clipped()
                    .padding(.top, -height * 0.013)
            }
            .background(Color.white)
            .frame(width: width * 0.43, height: height * 0.38, alignment: .center)

            .mask(RoundedRectangle(cornerRadius: 10))
            .padding(EdgeInsets(top: 0, leading: width/20, bottom: 0, trailing: width/20))
            .shadow(color: .gray.opacity(0.5), radius: 3, x: 0, y: 0)
            .offset(offset)
            .gesture(DragGesture()
                        .onChanged{gesture in
                            self.offset.width = gesture.translation.width
                        }
                        .onEnded({ gesture in
                            withAnimation(.spring()){
                                if gesture.predictedEndTranslation.width < -width*0.21 {
                                    modelData.TabItemList = modelData.TabItemList.filter({$0.id != id})
                                    callback?.deleteTabViewById(id: id)
                                }else if gesture.predictedEndTranslation.width > width*0.21 {
                                    modelData.TabItemList = modelData.TabItemList.filter({$0.id != id})
                                    callback?.deleteTabViewById(id: id)
                                }else{
                                    self.offset = CGSize(width: 0, height: 0)
                                }
                            }
                        }))
            }
    }
}

//struct TabListItem_Previews: PreviewProvider {
//    static var previews: some View {
//        TabListItem(logo: Image("qq"), title: "I'm QQ", url: "https://im.qq.com", image: Image("bg"), id: UUID())
//            .environmentObject(TabItemsModelData())
//    }
//}
